<script setup lang="ts">
// 内容格式设置弹窗
import { computed, ref, watch } from 'vue';
import type { FormInst, FormRules } from 'naive-ui';
import { updateCatalogAction } from '@/service/api';
import {generateRandomCode, successMessage} from '@/utils/utils';
import LeftImg from '@/assets/imgs/align-left.png';
import LeftSelImg from '@/assets/imgs/align-left-sel.png';
import CenterImg from '@/assets/imgs/align-center.png';
import CenterSelImg from '@/assets/imgs/align-center-sel.png';
import RightImg from '@/assets/imgs/align-right.png';
import RightSelImg from '@/assets/imgs/align-right-sel.png';
import BoldImg from '@/assets/imgs/icon-bold.png';
import BoldSelImg from '@/assets/imgs/icon-bold-sel.png';

interface Props {
  show: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  show: false
});

interface FormData {
  topSpace: number; // 上边距
  bottomSpace: number; // 下边距
  leftSpace: number; // 左边距
  rightSpace: number; // 右边距

  firstFont: string;
  firstFamily: string;
  firstAlign: string;
  firstBold: boolean;

  secondFont: string;
  secondFamily: string;
  secondAlign: string;
  secondBold: boolean;

  thirdFont: string;
  thirdFamily: string;
  thirdAlign: string;
  thirdBold: boolean;

  textFont: string;
  textFamily: string;
  textAlign: string;
  textBold: boolean;
  textIndent: boolean;

  firstType: string;
  secondType: string;
  thirdType: string;
  fourthType: string;
  fifthType: string;
  sixthType: string;

  titleFormat: number;
}

const formData = ref<FormData>({
  topSpace: 2.54,
  bottomSpace: 2.54,
  leftSpace: 3.18,
  rightSpace: 3.18,

  firstFont: '默认字体',
  firstFamily: '默认字号',
  firstAlign: 'left',
  firstBold: false,

  secondFont: '默认字体',
  secondFamily: '默认字号',
  secondAlign: 'left',
  secondBold: false,

  thirdFont: '默认字体',
  thirdFamily: '默认字号',
  thirdAlign: 'left',
  thirdBold: false,

  textFont: '默认字体',
  textFamily: '默认字号',
  textAlign: 'left',
  textBold: false,
  textIndent: false,

  firstType: '一',
  secondType: '一',
  thirdType: '一',
  fourthType: '一',
  fifthType: '一',
  sixthType: '一',

  titleFormat: 1
});

const defaultFormData = ref<FormData>({
  topSpace: 2.54,
  bottomSpace: 2.54,
  leftSpace: 3.18,
  rightSpace: 3.18,

  firstFont: '默认字号',
  firstFamily: '默认字体',
  firstAlign: 'left',
  firstBold: false,

  secondFont: '默认字号',
  secondFamily: '默认字体',
  secondAlign: 'left',
  secondBold: false,

  thirdFont: '默认字号',
  thirdFamily: '默认字体',
  thirdAlign: 'left',
  thirdBold: false,

  textFont: '默认字号',
  textFamily: '默认字体',
  textAlign: 'left',
  textBold: false,
  textIndent: false,

  firstType: '一',
  secondType: '一',
  thirdType: '一',
  fourthType: '一',
  fifthType: '一',
  sixthType: '一',

  titleFormat: 1
});

const fontSizeOptions = ref<any[]>([
  {
    value: '默认字号',
    label: '默认字号'
  },
  {
    value: '58.6px',
    label: '初号'
  },
  {
    value: '48px',
    label: '小初'
  },
  {
    value: '34.6px',
    label: '一号'
  },
  {
    value: '32px',
    label: '小一'
  },
  {
    value: '29.3px',
    label: '二号'
  },
  {
    value: '24px',
    label: '小二'
  },
  {
    value: '21.3px',
    label: '三号'
  },
  {
    value: '20px',
    label: '小三'
  },
  {
    value: '18.6px',
    label: '四号'
  },
  {
    value: '16px',
    label: '小四'
  },
  {
    value: '14px',
    label: '五号'
  },
  {
    value: '12px',
    label: '小五'
  }
]); // 字号选项
const fontFamilyOptions = ref<any[]>([
  {
    value: '默认字体',
    label: '默认字体'
  },
  {
    value: 'SimHei',
    label: '黑体'
  },
  {
    value: 'FangSong',
    label: '仿宋'
  },
  {
    value: 'KaiTi',
    label: '楷体'
  },
  {
    value: 'STFangsong',
    label: '华文仿宋'
  },
  {
    value: 'STKaiti',
    label: '华文楷体'
  },
  {
    value: 'STXingkai',
    label: '华文行楷'
  },
  {
    value: 'SimSun',
    label: '宋体'
  },
  {
    value: 'Microsoft Yahei',
    label: '微软雅黑'
  },
  {
    value: 'Arial',
    label: 'Arial'
  },
  {
    value: 'Tahoma',
    label: 'Tahoma'
  },
  {
    value: 'Verdana',
    label: 'Verdana'
  },
  {
    value: 'Times New Roman',
    label: 'Times New Roman'
  },
  {
    value: 'Courier New',
    label: 'Courier New'
  }
]); // 字体选项
const alignImgOptions = ref<any[]>([
  {
    code: generateRandomCode(3),
    align: 'left',
    img: LeftImg,
    selImg: LeftSelImg
  },
  {
    code: generateRandomCode(3),
    align: 'center',
    img: CenterImg,
    selImg: CenterSelImg
  },
  {
    code: generateRandomCode(3),
    align: 'right',
    img: RightImg,
    selImg: RightSelImg
  }
]);

const firstNumOptions = ref<any[]>([
  {
    label: '一、二、三...',
    value: '一'
  },
  {
    label: '（一）、（二）、（三）...',
    value: '（一）'
  },
  {
    label: '1、2、3...',
    value: '1'
  }
]);

const secondNumOptions = ref<any[]>([
  {
    label: '一、二、三...',
    value: '一'
  },
  {
    label: '（一）、（二）、（三）...',
    value: '（一）'
  },
  {
    label: '1、2、3...',
    value: '1'
  },
  {
    label: '（1）、（2）、（3）...',
    value: '（1）'
  }
]);

const thirdNumOptions = ref<any[]>([
  {
    label: '一、二、三...',
    value: '一'
  },
  {
    label: '（一）、（二）、（三）...',
    value: '（一）'
  },
  {
    label: '1、2、3...',
    value: '1'
  },
  {
    label: '（1）、（2）、（3）...',
    value: '（1）'
  },
  {
    label: '1.1、1.2、1.3...',
    value: '1.1'
  },
  {
    label: '1.1.1、1.1.2、1.1.3...',
    value: '1.1.1'
  }
]);

const fourthNumOptions = ref<any[]>([
  {
    label: '一、二、三...',
    value: '一'
  },
  {
    label: '（一）、（二）、（三）...',
    value: '（一）'
  },
  {
    label: '1、2、3...',
    value: '1'
  },
  {
    label: '（1）、（2）、（3）...',
    value: '（1）'
  },
  {
    label: '1.1、1.2、1.3...',
    value: '1.1'
  },
  {
    label: '1.1.1、1.1.2、1.1.3...',
    value: '1.1.1'
  },
  {
    label: '1.1.1.1、1.1.1.2、1.1,1.3...',
    value: '1.1.1.1'
  }
]);

const fifthNumOptions = ref<any[]>([
  {
    label: '一、二、三...',
    value: '一'
  },
  {
    label: '（一）、（二）、（三）...',
    value: '（一）'
  },
  {
    label: '1、2、3...',
    value: '1'
  },
  {
    label: '（1）、（2）、（3）...',
    value: '（1）'
  },
  {
    label: '1.1、1.2、1.3...',
    value: '1.1'
  },
  {
    label: '1.1.1、1.1.2、1.1.3...',
    value: '1.1.1'
  },
  {
    label: '1.1.1.1、1.1.1.2、1.1,1.3...',
    value: '1.1.1.1'
  },
  {
    label: '1.1.1.1.1、1.1.1.1.2、1.1,1.1.3...',
    value: '1.1.1.1.1'
  }
]);

const sixthNumOptions = ref<any[]>([
  {
    label: '一、二、三...',
    value: '一'
  },
  {
    label: '（一）、（二）、（三）...',
    value: '（一）'
  },
  {
    label: '1、2、3...',
    value: '1'
  },
  {
    label: '（1）、（2）、（3）...',
    value: '（1）'
  },
  {
    label: '1.1、1.2、1.3...',
    value: '1.1'
  },
  {
    label: '1.1.1、1.1.2、1.1.3...',
    value: '1.1.1'
  },
  {
    label: '1.1.1.1、1.1.1.2、1.1,1.3...',
    value: '1.1.1.1'
  },
  {
    label: '1.1.1.1.1、1.1.1.1.2、1.1,1.1.3...',
    value: '1.1.1.1.1'
  },
  {
    label: '1.1.1.1.1.1、1.1.1.1.1.2、1.1,1.1.1.3...',
    value: '1.1.1.1.1.1'
  }
]);

const titleStyle = ref<any[]>([
  {
    label: '固定标题样式',
    value: 1
  },
  {
    label: '无标题样式',
    value: 0
  }
]);

const emit = defineEmits(['update:show', 'saveFormatSetting']);

const modalShowValue = computed({
  get() {
    return props.show;
  },
  set(value: boolean) {
    emit('update:show', value);
  }
});

watch(
  () => props.show,
  value => {
    if (value) {
      Object.assign(formData.value, defaultFormData.value);
    }
  }
);

// 对齐
function textAlignClick(type: number, item: any) {
  switch (type) {
    case 1:
      formData.value.firstAlign = item.align;
      break;
    case 2:
      formData.value.secondAlign = item.align;
      break;
    case 3:
      formData.value.thirdAlign = item.align;
      break;
    case 4:
      formData.value.textAlign = item.align;
      break;
    default:
      break;
  }
}

// 取消
function closeModal() {
  console.log('close');
  modalShowValue.value = false;
}

// 确认
function saveClick() {
  emit('saveFormatSetting', formData.value);
  // successMessage('修改成功');
  closeModal();
}
</script>

<template>
  <NModal
    v-model:show="modalShowValue"
    preset="card"
    title="下载格式"
    class="w-60vw"
    :mask-closable="false"
    @close="closeModal"
  >
    <NScrollbar class="max-h-75vh">
      <NSpace vertical>
        <!-- 页面格式 -->
<!--        <div class="title-box">-->
<!--          <div class="title-tag"></div>-->
<!--          <span class="title-text">页面格式</span>-->
<!--          <div class="title-line"></div>-->
<!--        </div>-->
<!--        <NSpace class="ml-50px">-->
<!--          <div class="flex-y-center">-->
<!--            <span class="space-text">上边距</span>-->
<!--            <NInputNumber v-model:value="formData.topSpace" :step="0.01" :min="0" :max="100" class="w-30 ml-10px mr-10px" />-->
<!--            <span class="space-text">cm</span>-->
<!--          </div>-->
<!--          <div class="flex-y-center">-->
<!--            <span class="space-text">下边距</span>-->
<!--            <NInputNumber v-model:value="formData.bottomSpace" :step="0.01" :min="0" :max="100" class="w-30 ml-10px mr-10px" />-->
<!--            <span class="space-text">cm</span>-->
<!--          </div>-->
<!--          <div class="flex-y-center">-->
<!--            <span class="space-text">左边距</span>-->
<!--            <NInputNumber v-model:value="formData.leftSpace" :step="0.01" :min="0" :max="100" class="w-30 ml-10px mr-10px" />-->
<!--            <span class="space-text">cm</span>-->
<!--          </div>-->
<!--          <div class="flex-y-center">-->
<!--            <span class="space-text">右边距</span>-->
<!--            <NInputNumber v-model:value="formData.rightSpace" :step="0.01" :min="0" :max="100" class="w-30 ml-10px mr-10px" />-->
<!--            <span class="space-text">cm</span>-->
<!--          </div>-->
<!--        </NSpace>-->
        <!-- 一级标题格式 -->
        <div class="title-box">
          <div class="title-tag second-tag"></div>
          <span class="title-text">一级标题格式（第XX章）</span>
          <div class="title-line second-line"></div>
        </div>
        <NSpace align="center" class="ml-50px">
          <div class="flex-y-center">
            <span class="space-text">字体</span>
            <NSelect
              class="ml-10px w-160px"
              v-model:value="formData.firstFamily"
              :options="fontFamilyOptions"
            />
          </div>
          <div class="flex-y-center">
            <span class="space-text">字号</span>
            <NSelect
              class="ml-10px w-120px"
              v-model:value="formData.firstFont"
              :options="fontSizeOptions"
            />
          </div>
          <div class="flex-y-center">
            <span class="space-text">对齐</span>
            <NSpace class="ml-10px mr-10px">
              <img
                v-for="item in alignImgOptions"
                :key="item.code"
                class="cursor-pointer"
                width="17"
                height="17"
                :src="item.align === formData.firstAlign ? item.selImg : item.img"
                alt=""
                @click="textAlignClick(1, item)"
              />
            </NSpace>
          </div>
          <div class="flex-y-center">
            <span class="space-text">加粗</span>
            <img class="cursor-pointer" width="17" height="17" :src="formData.firstBold ? BoldSelImg : BoldImg" alt="" @click="formData.firstBold = !formData.firstBold" />
          </div>
        </NSpace>
        <!-- 二级标题格式 -->
        <div class="title-box">
          <div class="title-tag third-tag"></div>
          <span class="title-text">二级标题格式（第XX节）</span>
          <div class="title-line third-line"></div>
        </div>
        <NSpace align="center" class="ml-50px">
          <div class="flex-y-center">
            <span class="space-text">字体</span>
            <NSelect
              class="ml-10px w-160px"
              v-model:value="formData.secondFamily"
              :options="fontFamilyOptions"
            />
          </div>
          <div class="flex-y-center">
            <span class="space-text">字号</span>
            <NSelect
              class="ml-10px w-120px"
              v-model:value="formData.secondFont"
              :options="fontSizeOptions"
            />
          </div>
          <div class="flex-y-center">
            <span class="space-text">对齐</span>
            <NSpace class="ml-10px mr-10px">
              <img
                v-for="item in alignImgOptions"
                :key="item.code"
                class="cursor-pointer"
                width="17"
                height="17"
                :src="item.align === formData.secondAlign ? item.selImg : item.img"
                alt=""
                @click="textAlignClick(2, item)"
              />
            </NSpace>
          </div>
          <div class="flex-y-center">
            <span class="space-text">加粗</span>
            <img class="cursor-pointer" width="17" height="17" :src="formData.secondBold ? BoldSelImg : BoldImg" alt="" @click="formData.secondBold = !formData.secondBold" />
          </div>
        </NSpace>
        <!-- 三级标题格式 -->
        <div class="title-box">
          <div class="title-tag fourth-tag"></div>
          <span class="title-text">三级标题格式（一、二）</span>
          <div class="title-line fourth-line"></div>
        </div>
        <NSpace align="center" class="ml-50px">
          <div class="flex-y-center">
            <span class="space-text">字体</span>
            <NSelect
              class="ml-10px w-160px"
              v-model:value="formData.thirdFamily"
              :options="fontFamilyOptions"
            />
          </div>
          <div class="flex-y-center">
            <span class="space-text">字号</span>
            <NSelect
              class="ml-10px w-120px"
              v-model:value="formData.thirdFont"
              :options="fontSizeOptions"
            />
          </div>
          <div class="flex-y-center">
            <span class="space-text">对齐</span>
            <NSpace class="ml-10px mr-10px">
              <img
                v-for="item in alignImgOptions"
                :key="item.code"
                class="cursor-pointer"
                width="17"
                height="17"
                :src="item.align === formData.thirdAlign ? item.selImg : item.img"
                alt=""
                @click="textAlignClick(3, item)"
              />
            </NSpace>
          </div>
          <div class="flex-y-center">
            <span class="space-text">加粗</span>
            <img class="cursor-pointer" width="17" height="17" :src="formData.thirdBold ? BoldSelImg : BoldImg" alt="" @click="formData.thirdBold = !formData.thirdBold" />
          </div>
        </NSpace>
        <!-- 正文格式 -->
        <div class="title-box">
          <div class="title-tag fifth-tag"></div>
          <span class="title-text">正文格式</span>
          <div class="title-line fifth-line"></div>
        </div>
        <NSpace align="center" class="ml-50px">
          <div class="flex-y-center">
            <span class="space-text">字体</span>
            <NSelect
              class="ml-10px w-160px"
              v-model:value="formData.textFamily"
              :options="fontFamilyOptions"
            />
          </div>
          <div class="flex-y-center">
            <span class="space-text">字号</span>
            <NSelect
              class="ml-10px w-120px"
              v-model:value="formData.textFont"
              :options="fontSizeOptions"
            />
          </div>
          <div class="flex-y-center">
            <span class="space-text">首行缩进</span>
            <n-switch v-model:value="formData.textIndent" class="ml-10px mr-15px" />
          </div>
          <div class="flex-y-center">
            <span class="space-text">对齐</span>
            <NSpace class="ml-10px mr-10px">
              <img
                v-for="item in alignImgOptions"
                :key="item.code"
                class="cursor-pointer"
                width="17"
                height="17"
                :src="item.align === formData.textAlign ? item.selImg : item.img"
                alt=""
                @click="textAlignClick(4, item)"
              />
            </NSpace>
          </div>
          <div class="flex-y-center">
            <span class="space-text">加粗</span>
            <img class="cursor-pointer" width="17" height="17" :src="formData.textBold ? BoldSelImg : BoldImg" alt="" @click="formData.textBold = !formData.textBold" />
          </div>
        </NSpace>
        <!-- 正文序号 -->
        <div class="title-box">
          <div class="title-tag sixth-tag"></div>
          <span class="title-text">标题样式</span>
          <div class="title-line sixth-line"></div>
        </div>
        <NSpace class="ml-50px" vertical>
          <div class="flex-y-center">
            <span class="space-text">样式</span>
            <NSelect
              class="ml-10px w-360px"
              v-model:value="formData.titleFormat"
              :options="titleStyle"
            />
          </div>
<!--          <div class="flex-y-center">-->
<!--            <span class="space-text">第二级序号</span>-->
<!--            <NSelect-->
<!--              class="ml-10px w-360px"-->
<!--              v-model:value="formData.secondType"-->
<!--              :options="secondNumOptions"-->
<!--            />-->
<!--          </div>-->
<!--          <div class="flex-y-center">-->
<!--            <span class="space-text">第三级序号</span>-->
<!--            <NSelect-->
<!--              class="ml-10px w-360px"-->
<!--              v-model:value="formData.thirdType"-->
<!--              :options="thirdNumOptions"-->
<!--            />-->
<!--          </div>-->
<!--          <div class="flex-y-center">-->
<!--            <span class="space-text">第四级序号</span>-->
<!--            <NSelect-->
<!--              class="ml-10px w-360px"-->
<!--              v-model:value="formData.fourthType"-->
<!--              :options="fourthNumOptions"-->
<!--            />-->
<!--          </div>-->
<!--          <div class="flex-y-center">-->
<!--            <span class="space-text">第五级序号</span>-->
<!--            <NSelect-->
<!--              class="ml-10px w-360px"-->
<!--              v-model:value="formData.fifthType"-->
<!--              :options="fifthNumOptions"-->
<!--            />-->
<!--          </div>-->
<!--          <div class="flex-y-center">-->
<!--            <span class="space-text">第六级序号</span>-->
<!--            <NSelect-->
<!--              class="ml-10px w-360px"-->
<!--              v-model:value="formData.sixthType"-->
<!--              :options="sixthNumOptions"-->
<!--            />-->
<!--          </div>-->
        </NSpace>
      </NSpace>
    </NScrollbar>
    <template #footer>
      <NSpace class="w-full" :size="24" justify="end">
        <NButton class="w-72px" @click="closeModal">取消</NButton>
        <NButton class="w-72px" type="primary" @click="saveClick">确定</NButton>
      </NSpace>
    </template>
  </NModal>
</template>

<style scoped lang="scss">
.title-box {
  display: flex;
  align-items: end;
  .title-tag {
    width: 10px;
    height: 18px;
    background: #e777ae;
    border-radius: 0px 6px 6px 0px;
  }
  .second-tag {
    background: #dc76b8;
  }
  .third-tag {
    background: #c675c9;
  }
  .fourth-tag {
    background: #ac72de;
  }
  .fifth-tag {
    background: #9570f1;
  }
  .sixth-tag {
    background: #846ffe;
  }
  .title-text {
    margin: 0 10px;
    font-weight: 400;
    font-size: 16px;
    line-height: 18px;
    color: #333333;
  }
  .title-line {
    flex: 1;
    width: auto;
    height: 2px;
    margin-bottom: 2px;
    background: linear-gradient(90deg, #e777ae 0%, #ffffff 100%);
    opacity: 0.3;
  }
  .second-line {
    background: linear-gradient(90deg, #dc76b8 0%, #ffffff 100%);
  }
  .third-line {
    background: linear-gradient(90deg, #c675c9 0%, #ffffff 100%);
  }
  .fourth-line {
    background: linear-gradient(90deg, #ac72de 0%, #ffffff 100%);
  }
  .fifth-line {
    background: linear-gradient(90deg, #9570f1 0%, #ffffff 100%);
  }
  .sixth-line {
    background: linear-gradient(90deg, #846ffe 0%, #ffffff 100%);
  }
  .space-text {
    font-weight: 400;
    font-size: 16px;
    color: #333333;
  }
  .content-format-img {
    cursor: pointer;
  }
}
</style>
